<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: tomato;
        }

        .base {
            display: none;
        }
    </style>
</head>
<body>
<!--
   bom   浏览器对象模型
    所有浏览器都支持 window 对象。它表示浏览器窗口。
    所有 JavaScript 全局对象、函数以及变量均自动成为 window 对象的成员。
    全局变量是 window 对象的属性。
    全局函数是 window 对象的方法。
-->
<div>

</div>

<script>
    // 全局变量
    var age = 20

    function add(a, b) {
        return a + b
    }

    console.log(age)
    console.log(window.age)
    console.log(window)


    // 监听window尺寸的改变
    window.onresize = function () {
        // 获取浏览器的宽度和高度
        var width = window.innerWidth
        var height = window.innerHeight
        var str = `width=${width},height=${height}`
        console.log(str)
        var div = document.getElementsByTagName('div')[0]
        if (width < 900) {
            div.classList.add('base')
        }else {
            div.classList.remove('base')
        }
    }


</script>
</body>
</html>